<template>
  <el-container>
    <div class="abs">
      <el-form inline :model="formData">
        <el-form-item label="参考系类型">
          <el-select v-model="formData.referenceName" size="mini">
            <el-option label="WGS84" value="WGS84"></el-option>
            <el-option label="BJ54" value="BJ54"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker
            type="datetime"
            placeholder="选择开始时间"
            size="mini"
            v-model="formData.startTime"
            default-time="00:00:00"
            :picker-options="startTimePicker"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
            type="datetime"
            placeholder="选择结束时间"
            size="mini"
            v-model="formData.endTime"
            default-time="00:00:00"
            :picker-options="endTimePicker"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="统计时间类型">
          <el-select v-model="formData.timeType" size="mini">
            <el-option label="每24小时" value="24"></el-option>
            <el-option label="每12小时" value="12"></el-option>
            <el-option label="每6小时" value="6"></el-option>
            <el-option label="每2小时" value="2"></el-option>
            <el-option label="每1小时" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="add">新增</el-button>
        </el-form-item>
      </el-form>
      <el-scrollbar style="height: 90%">
        <div class="content">
          <div
            class="chartBox"
            v-for="index in chartList"
            :key="index"
            :id="'chartBox' + index"
          >
            <div class="chart"></div>
            <el-button
              type="danger"
              icon="el-icon-minus"
              circle
              @click="del(index)"
            ></el-button>
          </div>
        </div>
      </el-scrollbar>
      <el-dialog :visible.sync="dialogVisible" width="20%">
        <p>请选择传感器</p>
        <el-form :model="addForm" label-position="left" label-width="100px">
          <el-form-item label="监测体">
            <el-select
              placeholder="请选择监测体"
              v-model="addForm.monitorId"
              clearable
              size="medium"
              @change="monitorChange"
            >
              <el-option
                v-for="(item, index) in monitorList"
                :key="index"
                :label="item.monitorName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="传感器类型">
            <el-select
              placeholder="请选择传感器类型"
              v-model="addForm.moduleEnum"
              clearable
              size="medium"
              @change="moduleEnumChange"
            >
              <el-option label="北斗" value="00"></el-option>
              <el-option label="岩土" value="01"></el-option>
              <el-option label="气象" value="02"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-scrollbar style="height: 300px">
          <el-tree
            :data="sensorList"
            show-checkbox
            node-key="id"
            ref="tree"
            :props="defaultProps"
          >
          </el-tree>
        </el-scrollbar>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handle">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </el-container>
</template>

<script>
import Axios from "axios";
import moment from "moment";
import * as serviceApi from "../../common/service.config";
Axios.defaults.withcredentials = true;

export default {
  name: "ContrastiveAnalysis",
  data() {
    return {
      formData: {
        referenceName: "WGS84",
        startTime: moment().subtract(1, "months").format("YYYY-MM-DD 00:00:00"),
        endTime: moment().format("YYYY-MM-DD 00:00:00"),
        timeType: "24",
      },
      chartList: [],
      dialogVisible: false,
      monitorList: null,
      sensorList: null,
      addForm: {
        monitorId: "",
        moduleEnum: "",
      },
      defaultProps: {
        label: "sensorName",
      },
      checkedNodesList: [],
    };
  },
  computed: {
    startTimePicker() {
      return {
        disabledDate: (time) =>
          this.formData.startTime
            ? time.getTime() > new Date(this.formData.endTime).getTime()
            : false,
      };
    },
    endTimePicker() {
      return {
        disabledDate: (time) =>
          this.formData.endTime
            ? time.getTime() > new Date().getTime() ||
              time.getTime() < new Date(this.formData.startTime).getTime()
            : false,
      };
    },
  },
  methods: {
    add() {
      this.dialogVisible = true;
      this.addForm = {
        monitorId: "",
        moduleEnum: "",
      };
      this.sensorList = null;
    },
    monitorChange(value) {
      this.sensorList = null;
      if (value != "" && this.addForm.moduleEnum != "") {
        Axios({
          url: serviceApi.KB_API,
          method: "post",
          data: `appMsg={"parameter":"{\\"monitorId\\":\\"${value}\\",\\"moduleEnum\\":\\"${this.addForm.moduleEnum}\\"}","serviceCode":"listSensorByMonitor","timestamp":"","uuid":""}`,
        }).then((res) => {
          this.sensorList = res.data.parameter.list;
        });
      }
    },
    moduleEnumChange(value) {
      this.sensorList = null;
      if (value != "" && this.addForm.monitorId != "") {
        Axios({
          url: serviceApi.KB_API,
          method: "post",
          data: `appMsg={"parameter":"{\\"monitorId\\":\\"${this.addForm.monitorId}\\",\\"moduleEnum\\":\\"${value}\\"}","serviceCode":"listSensorByMonitor","timestamp":"","uuid":""}`,
        }).then((res) => {
          this.sensorList = res.data.parameter.list;
        });
      }
    },
    /* 单点变形分析 */
    SinglePointAnalysis(queryData, list, chart) {
      let xdata = [],
        ydata = [],
        hdata = [],
        pdata = [],
        theDate = [];
      for (let j = 0; j < list.length; j++) {
        xdata.push((list[j].xdata * 1000).toFixed(1));
        ydata.push((list[j].ydata * 1000).toFixed(1));
        hdata.push((list[j].hdata * 1000).toFixed(1));
        pdata.push((list[j].pdata * 1000).toFixed(1));
        theDate.push(moment(list[j].theDate / 1).format("YYYY-MM-DD HH:mm:ss"));
      }
      let myChart = this.$echarts.init(document.querySelector(chart));
      let chartOption = {
        title: {
          text:
            queryData.sensorName +
            "站点" +
            queryData.startTime +
            "至" +
            queryData.endTime +
            "内单点变形分析（" +
            queryData.referenceName +
            "）",
          left: "center",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          top: 30,
          data: ["x平移", "y平移", "H位移", "平面位移"],
        },
        grid: {
          left: "10%",
          right: "10%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
          right: "5%",
          top: "5%",
        },
        xAxis: {
          name: "时间",
          type: "category",
          boundaryGap: false,
          data: theDate,
        },
        yAxis: {
          name: "位移(mm)",
          type: "value",
          // axisLabel: {
          //     formatter: '{value} mm'
          // }
        },
        color: [
          "#027602",
          "#0101F6",
          "#840284",
          "#FF0000",
          "#27727B",
          "#FE8463",
          "#9BCA63",
          "#FAD860",
          "#F3A43B",
          "#60C0DD",
          "#D7504B",
          "#C6E579",
          "#F4E001",
          "#F0805A",
          "#26C0C0",
        ],
        series: [
          {
            name: "x平移",
            type: "line",
            smooth: true,
            lineStyle: {
              normal: {
                width: 3,
              },
            },
            data: xdata,
          },
          {
            name: "y平移",
            type: "line",
            smooth: true,
            lineStyle: {
              normal: {
                width: 3,
              },
            },
            data: ydata,
          },
          {
            name: "H位移",
            type: "line",
            smooth: true,
            lineStyle: {
              normal: {
                width: 3,
              },
            },
            data: hdata,
          },
          {
            name: "平面位移",
            type: "line",
            smooth: true,
            lineStyle: {
              normal: {
                width: 3,
              },
            },
            data: pdata,
          },
        ],
      };
      myChart.clear();
      myChart.setOption(chartOption);
      myChart.resize();
    },
    /* 累计降雨量 */
    initRainfallChart(collectTimeData, rainfallData, queryData, chart) {
      let queryRainfall = this.$echarts.init(document.querySelector(chart));
      let chartOption = {
        title: {
          text:
            queryData.sensorName +
            "站点" +
            queryData.startTime +
            "至" +
            queryData.endTime +
            "内雨量",
          left: "center",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          top: 30,
          data: ["雨量"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: { show: true },
          },
          right: "5%",
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
            data: (function () {
              let data = [];
              if (collectTimeData[0] != "") {
                for (let i = 0; i < collectTimeData.length; i++) {
                  data.push(
                    moment(collectTimeData[i].replace(/-/g, "/")).format(
                      "YYYY-MM-DD HH"
                    )
                  );
                }
              }
              return data;
            })(),
          },
        ],
        yAxis: [
          {
            axisLabel: {
              formatter: "{value} mm",
            },
            type: "value",
          },
        ],
        series: [
          {
            name: "雨量",
            type: "bar",
            barWidth: "60%",
            data: (function () {
              let data = [];
              for (let i = 0; i < rainfallData.length; i++) {
                data.push(rainfallData[i]);
              }
              return data;
            })(),
            itemStyle: {
              //通常情况下：
              normal: {
                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                color: function (params) {
                  let colorList = [];
                  for (let i = 0; i < rainfallData.length; i++) {
                    let rainFall = rainfallData[i];
                    if (rainFall >= 50) {
                      colorList.push("rgb(226, 10, 23)");
                    } else if (rainFall >= 40 && rainFall < 50) {
                      colorList.push("rgb(252, 113, 20)");
                    } else if (rainFall >= 15 && rainFall < 40) {
                      colorList.push("rgb(255, 210, 10)");
                    } else if (rainFall >= 7 && rainFall < 15) {
                      colorList.push("rgb(74, 140, 254)");
                    } else {
                      colorList.push("rgb(32, 208, 254)");
                    }
                  }
                  return colorList[params.dataIndex];
                },
              },
            },
          },
        ],
        label: {
          normal: {
            show: true,
            position: "top",
            textStyle: {
              color: "black",
            },
          },
        },
      };
      queryRainfall.setOption(chartOption);
    },
    creatRainfallChart(result_list, queryData, chart) {
      let collectTimeData = [];
      let rainfallData = [];
      if (result_list.length != 0) {
        for (let i = 0; i < result_list.length; i++) {
          collectTimeData.push(result_list[i].collectTime);
          rainfallData.push(result_list[i].rainFall);
        }
        this.initRainfallChart(collectTimeData, rainfallData, queryData, chart);
      }
    },
    /* 深部位移 */
    createTotalOffsetChart(queryData, xdata) {
      let sensorNumberList = [];
      sensorNumberList.push(queryData.sensorNumber);
      let XData = xdata;
      let splitArea = XData;
      function getDays(day1, day2) {
        // 获取入参字符串形式日期的Date型日期
        String.prototype.getDate = function () {
          var strArr = this.split("-");
          return new Date(strArr[0], strArr[1] - 1, strArr[2]);
        };
        // 给月和天，不足两位的前面补0
        function fz(num) {
          if (num < 10) {
            num = "0" + num;
          }
          return num;
        }
        Date.prototype.getYMD = function () {
          // 将结果放在数组中，使用数组的join方法返回连接起来的字符串，并给不足两位的天和月十位上补零
          return [
            this.getFullYear(),
            fz(this.getMonth() + 1),
            fz(this.getDate()),
          ].join("-");
        };

        var st = day1.getDate();
        var et = day2.getDate();
        var retArr = [];
        // 获取开始日期的年，月，日
        var yyyy = st.getFullYear(),
          mm = st.getMonth(),
          dd = st.getDate();
        // 循环
        while (st.getTime() != et.getTime()) {
          retArr.push(st.getYMD());
          // 使用dd++进行天数的自增
          st = new Date(yyyy, mm, ++dd);
        }
        // 将结束日期的天放进数组
        retArr.push(et.getYMD());
        return retArr;
      }
      let option = {
        baseOption: {
          timeline: {
            axisType: "category",
            autoPlay: true,
            playInterval: 1000,
            controlStyle: {
              position: "right",
            },
            left: 20,
            right: 20,
            data: (() => {
              return getDays(
                moment(this.formData.startTime).format("YYYY-MM-DD"),
                moment(this.formData.endTime).format("YYYY-MM-DD")
              );
            })(),
            label: {
              formatter: function (s) {
                return s;
              },
            },
          },
          title: {
            text: "深部位移站点累计位移量#" + queryData.sensorName,
            left: "center",
          },
          legend: {
            show: true,
            top: "7%",
            data: (function () {
              let dataArr = [];
              let length = sensorNumberList.length;
              for (let i = 0; i < length; i++) {
                dataArr.push(sensorNumberList[i]);
              }
              return dataArr;
            })(),
            textStyle: {
              color: "black",
              fontSize: 14,
            },
          },
          calculable: true,
          grid: (function () {
            let length = sensorNumberList.length;
            let gridArray = [];
            let width = 100 / length;
            for (let i = 0; i < length; i++) {
              let grid = {
                left: "30%",
                top: "20%",
                width: "40%",
                height: "60%",
              };
              gridArray.push(grid);
            }
            return gridArray;
          })(),
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "line",
            },
            formatter: function (params) {
              if (params[0]) {
                if (params[0].data.length > -1) {
                  return (
                    "高度: " +
                    params[0].data[1] +
                    "m<br>位移: " +
                    params[0].data[0] +
                    "mm"
                  );
                } else {
                  return "高度:  m<br>位移:  mm";
                }
              }
            },
          },
          xAxis: (function () {
            let length = sensorNumberList.length;
            let xAxisArray = [];
            for (let i = 0; i < length; i++) {
              let xAxis;
              xAxis = {
                gridIndex: 0,
                min: -1.1 * splitArea,
                max: 1.1 * splitArea,
                name: "位移(mm)",
                interval: splitArea / 20,
                nameGap: 30,
                nameLocation: "middle",
                axisLabel: {
                  show: true,
                  rotate: -70,
                  formatter: function (value, index) {
                    for (let i = 0; i < splitArea * 1.1; i++) {
                      if (value % (splitArea / 10) !== 0) {
                        return "  ";
                      }
                    }
                    return value;
                  },
                },
                splitLine: {
                  show: false,
                  boundaryGap: false,
                  color: "blue",
                  type: "value",
                },
                splitArea: {
                  show: true,
                  areaStyle: {
                    opacity: 0.45,
                    color: [
                      "#FE1C23",
                      "#FE1C23",
                      "#FE9C28",
                      "#FE9C28",
                      "#FE9C28",
                      "#FE9C28",
                      "#FE9C28",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#66cc66",
                      "#FE9C28",
                      "#FE9C28",
                      "#FE9C28",
                      "#FE9C28",
                      "#FE9C28",
                      "#FE1C23",
                      "#FE1C23",
                    ],
                  },
                }, //保留网格区域
              };
              xAxisArray.push(xAxis);
            }
            return xAxisArray;
          })(),
          yAxis: (function () {
            let length = sensorNumberList.length;
            let yAxisArray = [];
            for (let i = 0; i < length; i++) {
              let yAxis = {
                name: "高度(m)",
                //position: 'left',
                gridIndex: i,
                // min: 'dataMin',
                max: 0,
                type: "value",
                scale: true,
                nameLocation: "end",
                nameGap: 10,
              };
              yAxisArray.push(yAxis);
            }
            return yAxisArray;
          })(),
        },
        options: [],
      };
      return option;
    },
    pushDataToChart(dayList, option, queryData, chart) {
      let totalOffsetChart = this.$echarts.init(document.querySelector(chart));
      let ytData = null;
      for (let i = 0; i < dayList.length; i++) {
        let dataOption = { series: [] };
        let sensorList = dayList[i].list;
        let m = 0;
        for (let j = 0; j < sensorList.length; j++) {
          if (
            sensorList[j] == null ||
            sensorList[j] == "" ||
            sensorList[j] == undefined
          ) {
            continue;
          }
          let tunnelList = sensorList[j].list;
          if (
            tunnelList == null ||
            tunnelList == "" ||
            tunnelList == undefined
          ) {
            continue;
          }
          m = j + 1;
          dataOption.series.push({
            name: queryData.sensorName,
            type: "line" /*line*/,
            symbolSize: 10,
            lineStyle: {
              normal: {
                width: 2,
              },
              smooth: true,
            },
            smooth: true,
            xAxisIndex: j,
            yAxisIndex: j,
            data: (function () {
              let data = [],
                y;
              for (let k = 0; k < tunnelList.length; k++) {
                data.push([
                  parseFloat(tunnelList[k].offset).toFixed(1),
                  parseFloat(tunnelList[k].height).toFixed(2),
                ]);
                y = tunnelList[k].height;
              }
              return data;
            })(),
            itemStyle: {
              normal: {
                color: "#397B8B",
              },
              lineStyle: "pic",
              smooth: true,
            },
          });
        }
        option.options.push(dataOption);
      }
      totalOffsetChart.clear();
      totalOffsetChart.setOption(option);
      totalOffsetChart.resize();
      /* totalOffsetChart.on("timelinechanged", (params) => {
        if (option.options[params.currentIndex]) {
          let result = option.options[params.currentIndex].series[0].data;
          let lineTime = option.baseOption.timeline.data[params.currentIndex];
          let showTable = (ytData, data, lineTime, lineTitle) => {
            this.table.lineTitle = lineTitle;
            this.table.lineTime = lineTime;
            this.table.tableData = data;
            this.table.ytData = ytData;
          };
          showTable(ytData, result, lineTime, lineTitle);
          ytData = result;
        }
      }); */
    },
    /* 裂缝计 */
    initRockOffset(resultObj, chart, queryData) {
      let list = resultObj.parameter.list;
      if (list != null && list != "undefined") {
        let rockOffsetChart = this.$echarts.init(document.querySelector(chart));
        let xData = [],
          yData = [];
        for (let i = 0; i < list.length; i++) {
          xData.push(list[i].collectDate);
          yData.push(Math.abs(list[i].waterPressure).toFixed(1));
        }
        let chartOption = {
          title: {
            text: "裂缝计" + queryData.sensorName,
            left: "center",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          legend: {
            top: 30,
            data: ["裂缝(mm)"],
          },
          grid: {
            left: "20%",
            right: "20%",
            bottom: "3%",
            containLabel: true,
          },
          toolbox: {
            feature: {
              saveAsImage: {},
            },
            right: "5%",
          },
          xAxis: {
            name: "时间",
            type: "category",
            boundaryGap: true,
            data: xData,
          },
          yAxis: {
            name: "裂缝（mm）",
            type: "value",
            splitNumber: 10,
            // interval:10,
            axisLabel: {
              formatter: "{value} mm",
            },
            min: function (value) {
              return (value.min - 1).toFixed(1);
            },
            max: function (value) {
              return (value.max + 1).toFixed(1);
            },
          },
          series: [
            {
              name: "裂缝(mm)",
              type: "line",
              barGap: 0,
              color: ["#99cc66"],
              data: yData,
            },
          ],
        };
        rockOffsetChart.setOption(chartOption);
        rockOffsetChart.resize();
      }
    },
    /* 土壤湿度 */
    initHumidityChart(collectTimeData, humidityData, queryData, chart) {
      let xArray = [];
      let yArray1 = [];
      let yArray2 = [];
      let yArray3 = [];

      if (collectTimeData[0] != "") {
        for (let i = 0; i < collectTimeData[0].length; i++) {
          xArray.push(
            moment(collectTimeData[0][i].replace(/-/g, "/")).format(
              "YYYY-MM-DD HH"
            )
          );
        }
      }

      if (humidityData[0] != "") {
        for (let i = 0; i < humidityData[0].length; i++) {
          yArray1.push(humidityData[0][i]);
        }
      }

      if (humidityData[1] != "") {
        for (let i = 0; i < humidityData[1].length; i++) {
          yArray2.push(humidityData[1][i]);
        }
      }

      if (humidityData[2] != "") {
        for (let i = 0; i < humidityData[2].length; i++) {
          yArray3.push(humidityData[2][i]);
        }
      }
      let queryHumidity = this.$echarts.init(document.querySelector(chart));
      let chartOption = {
        color: ["#ff180c", "#0c0aff", "#ff9d04"],

        title: {
          text:
            queryData.sensorName +
            "站点" +
            queryData.startTime +
            "至" +
            queryData.endTime +
            "内土壤湿度",
          left: "center",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          top: 30,
          data: ["通道1土壤湿度", "通道2土壤湿度", "通道3土壤湿度"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
          right: "5%",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xArray,
        },
        yAxis: {
          type: "value",
          min: "dataMin",
          max: "dataMax",
          axisLabel: {
            formatter: "{value} %",
          },
        },
        series: [
          {
            name: "通道1土壤湿度",
            type: "line",
            smooth: true,
            lineStyle: {
              normal: {
                width: 2,
                color: "#ff180c",
              },
            },
            data: yArray1,
          },
          {
            name: "通道2土壤湿度",
            type: "line",
            smooth: true,
            lineStyle: {
              normal: {
                width: 2,
                color: "#0c0aff",
              },
            },
            data: yArray2,
          },
          {
            name: "通道3土壤湿度",
            type: "line",
            smooth: true,
            lineStyle: {
              normal: {
                width: 2,
                color: "#ff9d04",
              },
            },
            data: yArray3,
          },
        ],
      };

      queryHumidity.setOption(chartOption);
    },
    creatHumidityChart(result_list, queryData, chart) {
      let data = [];
      let collectTimeData = [];
      let humidityData = [];
      let collectTimeDataItem = [];
      let humidityDataItem = [];
      if (result_list.length != 0) {
        for (let i = 0; i < result_list.length; i++) {
          let list_data = result_list[i].list;

          collectTimeDataItem = [];
          humidityDataItem = [];

          for (let j = 0; j < list_data.length; j++) {
            let humidityDataTemp = list_data[j].waterPressure;
            let collectTimeDataTemp = list_data[j].collectDate;
            collectTimeDataItem.push(collectTimeDataTemp);
            humidityDataItem.push(parseFloat(humidityDataTemp).toFixed(1));
          }
          collectTimeData.push(collectTimeDataItem);
          humidityData.push(humidityDataItem);
        }
        this.initHumidityChart(collectTimeData, humidityData, queryData, chart);
      }
    },
    queryHumidityChart(resultObj, queryData, chart) {
      if (resultObj.parameter.list != null && resultObj.parameter.list != "") {
        let result_list = resultObj.parameter.list;
        this.creatHumidityChart(result_list, queryData, chart);
      }
    },
    /* 流量 */
    initFlowRate(resultObj, chart, queryData) {
      let list = resultObj.parameter.list;
      if (list != null && list != "undefined") {
        let xData = [],
          yData = [];
        for (let i = 0; i < list.length; i++) {
          xData.push(list[i].collectDate);
          yData.push(Math.abs(list[i].waterPressure).toFixed(1));
        }
        let rockOffsetChart = this.$echarts.init(document.querySelector(chart));
        let chartOption = {
          title: {
            text: "流量" + queryData.sensorName,
            left: "center",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          legend: {
            top: 30,
            data: ["流量(m^3)"],
          },
          grid: {
            left: "20%",
            right: "20%",
            bottom: "3%",
            containLabel: true,
          },
          toolbox: {
            feature: {
              saveAsImage: {},
            },
            right: "5%",
          },
          xAxis: {
            name: "时间",
            type: "category",
            boundaryGap: true,
            data: xData,
          },
          yAxis: {
            name: "流量(m^3)",
            type: "value",
            axisLabel: {
              formatter: "{value} ",
            },
            min: "dataMin",
          },
          series: [
            {
              name: "流量(m^3)",
              type: "line",
              barGap: 0,
              color: ["#99cc66"],
              data: yData,
            },
          ],
        };
        rockOffsetChart.setOption(chartOption);
        rockOffsetChart.resize();
      }
    },
    handle() {
      this.dialogVisible = false;
      let checkedKeys = this.$refs.tree.getCheckedKeys();
      this.chartList = this.chartList.concat(checkedKeys);
      this.chartList = [...new Set(this.chartList)];
      this.checkedNodesList = this.$refs.tree.getCheckedNodes();
      let startTime, endTime;
      if (!this.formData.startTime) {
        startTime = moment().subtract(31, "d").format("YYYY-MM-DD");
        this.formData.startTime = startTime;
      } else {
        startTime = moment(this.formData.startTime).format("YYYY-MM-DD");
      }
      if (!this.formData.endTime) {
        endTime = moment().format("YYYY-MM-DD");
        this.formData.endTime = endTime;
      } else {
        endTime = moment(this.formData.endTime).format("YYYY-MM-DD");
      }
      for (let i = 0, len = this.checkedNodesList.length; i < len; i++) {
        let queryData = {
          referenceName: this.formData.referenceName,
          sensorNumber: this.checkedNodesList[i].sensorNumber,
          startTime: startTime,
          endTime: endTime,
          timeType: this.formData.timeType,
          sensorName: this.checkedNodesList[i].sensorName,
        };
        switch (this.addForm.moduleEnum) {
          case "00":
            Axios({
              url: serviceApi.KB_API,
              method: "post",
              data: `appMsg={"parameter":"{\\"referenceName\\":\\"${queryData.referenceName}\\",\\"sensorNumber\\":\\"${queryData.sensorNumber}\\",\\"referenceType\\":\\"default\\",\\"startTime\\":\\"${queryData.startTime}\\",\\"endTime\\":\\"${queryData.endTime}\\",\\"timeType\\":\\"${queryData.timeType}\\"}","serviceCode":"planeAnalysis","timestamp":"","uuid":""}`,
            }).then((res) => {
              let list = res.data.parameter.list;
              this.SinglePointAnalysis(
                queryData,
                list,
                `#chartBox${this.checkedNodesList[i].id} .chart`
              );
            });
            break;
          case "01":
            switch (this.checkedNodesList[i].dataType) {
              case "01":
                Axios({
                  url: serviceApi.KB_API,
                  method: "post",
                  data: `appMsg={"parameter":"{\\"sensorNumberList\\":\\"${queryData.sensorNumber}\\",\\"tunnelNumber\\":\\"\\",\\"endTime\\":\\"${queryData.endTime}\\",\\"startTime\\":\\"${queryData.startTime}\\"}","serviceCode":"queryTotalOffset","timestamp":"","uuid":""}`,
                }).then((res) => {
                  let dayList = res.data.parameter.list;
                  Axios({
                    url: serviceApi.KB_API,
                    method: "post",
                    data: `appMsg={"parameter":"{\\"sensorNumber\\":\\"${queryData.sensorNumber}\\"}","serviceCode":"offsetChartX","timestamp":"","uuid":""}`,
                  }).then((res) => {
                    let XData = res.data.parameter.warningValueSetDmo.xdata;
                    this.pushDataToChart(
                      dayList,
                      this.createTotalOffsetChart(queryData, XData),
                      queryData,
                      `#chartBox${this.checkedNodesList[i].id} .chart`
                    );
                  });
                });
                break;
              case "02":
                Axios({
                  url: serviceApi.KB_API,
                  method: "post",
                  data: `appMsg={"parameter":"{\\"sensorNumber\\":\\"${queryData.sensorNumber}\\",\\"tunnelNumber\\":\\"\\",\\"startTime\\":\\"${queryData.startTime}\\",\\"endTime\\":\\"${queryData.endTime}\\"}","serviceCode":"queryGapByDate","timestamp":"","uuid":""}`,
                }).then((res) => {
                  this.initRockOffset(
                    res.data,
                    `#chartBox${this.checkedNodesList[i].id} .chart`,
                    queryData
                  );
                });
                break;
              case "04":
                Axios({
                  url: serviceApi.KB_API,
                  method: "post",
                  data: `appMsg={"parameter":"{\\"sensorNumber\\":\\"${queryData.sensorNumber}\\",\\"startTime\\":\\"${queryData.startTime}\\",\\"endTime\\":\\"${queryData.endTime}\\",\\"tunnelNumber\\":\\"\\"}","serviceCode":"queryWaterTableByDate","timestamp":"","uuid":""}`,
                }).then((res) => {
                  this.queryHumidityChart(
                    res.data,
                    queryData,
                    `#chartBox${this.checkedNodesList[i].id} .chart`
                  );
                });
                break;
              case "05":
                Axios({
                  url: serviceApi.KB_API,
                  method: "post",
                  data: `appMsg={"parameter":"{\\"sensorNumber\\":\\"${queryData.sensorNumber}\\",\\"tunnelNumber\\":\\"\\",\\"startTime\\":\\"${queryData.startTime}\\",\\"endTime\\":\\"${queryData.endTime}\\",\\"token\\":\\"0\\"}","serviceCode":"queryFlowRateByDate","timestamp":"","uuid":""}`,
                }).then((res) => {
                  this.initFlowRate(
                    res.data,
                    `#chartBox${this.checkedNodesList[i].id} .chart`,
                    queryData
                  );
                });
            }
            break;
          case "02":
            Axios({
              url: serviceApi.KB_API,
              method: "post",
              data: `appMsg={"parameter":"{\\"sensorNumber\\":\\"${queryData.sensorNumber}\\",\\"tunnelNumber\\":\\"\\",\\"startTime\\":\\"${queryData.startTime}\\",\\"endTime\\":\\"${queryData.endTime}\\",\\"timeType\\":\\"${queryData.timeType}\\"}","serviceCode":"queryRainFallByDate","timestamp":"","uuid":""}`,
            }).then((res) => {
              let resultObj = res.data;
              if (resultObj.parameter) {
                if (
                  resultObj.parameter.list &&
                  resultObj.parameter.list != ""
                ) {
                  let result_list = resultObj.parameter.list;
                  this.creatRainfallChart(
                    result_list,
                    queryData,
                    `#chartBox${this.checkedNodesList[i].id} .chart`
                  );
                }
              } else {
                this.initRainfallChart(
                  [],
                  [],
                  queryData,
                  `#chartBox${this.checkedNodesList[i].id} .chart`
                );
              }
            });
        }
      }
    },
    del(index) {
      Array.prototype.indexOf = function (val) {
        for (var i = 0; i < this.length; i++) {
          if (this[i] == val) return i;
        }
        return -1;
      };
      Array.prototype.remove = function (val) {
        var index = this.indexOf(val);
        if (index > -1) {
          this.splice(index, 1);
        }
      };
      this.chartList.remove(index);
    },
  },
  created() {
    Axios({
      url: serviceApi.KB_API,
      method: "post",
      data: `appMsg={"parameter":"{}","serviceCode":"listMonitorAndSensor","timestamp":"","uuid":""}`,
    }).then((res) => {
      this.monitorList = res.data.parameter.list;
    });
  },
};
</script>

<style lang='less' scoped>
.el-container {
  width: 100%;
  height: 100%;
  .abs {
    position: absolute;
    left: 0;
    top: 6.4%;
    width: 100%;
    height: 93.6%;
    > .el-form {
      padding: 10px;
      padding-bottom: 0;
    }
    p {
      text-align: center;
      font-size: 20px;
      padding-bottom: 5px;
    }
    .el-scrollbar /deep/ .el-scrollbar__wrap {
      overflow-x: hidden;
      .content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        .chartBox {
          width: 600px;
          height: 400px;
          border: 2px dashed #9f9f9f;
          margin-top: 20px;
          position: relative;
          .chart {
            width: 100%;
            height: 100%;
          }
          .el-button {
            position: absolute;
            right: -3.5%;
            top: -3.5%;
            transform: scale(0.7, 0.7);
          }
        }
      }
    }
  }
}
</style>